<template lang="html">
  <div class="orderdetails">
    <div class='orderdetails-content'>
		<span class='content-left'>配送方式</span>
		<div class='content-right'>
			<p class='content-right-top'>{{freight}}</p>
			<p class='content-right-bottom'>快递发货</p>
		</div>
    </div>
    <p class='orderdetails-center'>买家留言：无</p>
    <p class='center-p'>合计<span class='center-p-right'>￥{{details[0].price}}</span></p>
    <div class='orderdetails-bottom'>
		<p class='bottom-top'>商品金额<span>￥{{details[0].price | numFilter}}</span></p>
		<p class='bottom-bottom'>运费<span>+ {{NewFreight | numFilter}}</span></p>
    </div>
    <div class='payment'>
		<div class='payment-right'>
			<div class='payment-right-left'>合计：￥{{details[0].price}}</div>
			<div class='payment-right-tight'>去支付</div>
		</div>
    </div>
  </div>
</template>

<script>
export default {
  name:'OrderDetails',
  data(){
  	return{
  		freight:'免运费',
  		NewFreight:0
  	}
  },
  props:{
  	details:{
  		type:Array,
  		default:function(){
  			return {}
  		}
  	}
  },
  filters: {
	numFilter(value) {
	   let realVal = Number(value).toFixed(2)
	   return Number(realVal)
	}
  }
}
</script>

<style lang="less" scoped>
.orderdetails{
	width: 100%;
	float: left;
	.orderdetails-content{
		width: 95%;
		margin-left:2.5%;
		height: 1rem;
		float: left;
		margin-top:0.2rem;
		.content-left{
			font-size:0.35rem;
			float: left;
			line-height:1rem;
		}
		.content-right{
			float: right;
			width: 20%;
			height: 1rem;
			text-align:center;
			font-size:0.3rem;
			.content-right-top{
				float: left;
				width: 100%;
			}
			.content-right-bottom{
				float: left;
				width: 100%;
			}
		}
	}
	.orderdetails-center{
		width: 95%;
		margin-left:2.5%;
		font-size:0.35rem;
		float: left;
		margin-top:1.1rem;
	}
	.center-p{
		width: 95%;
		margin-left:2.5%;
		font-size:0.35rem;
		.center-p-right{
			float: right;
			color:red;
		}
	}
	.orderdetails-bottom{
		width: 95%;
		margin-left:2.5%;
		height: 1.2rem;
		float: left;
		margin-top:1rem;
		font-size:0.35rem;
		.bottom-top{
			line-height: 0.6rem;
			span{
				float: right;
			}
		}
		.bottom-bottom{
			line-height: 0.6rem;
			span{
				float: right;
			}
		}
	}
	.payment{
		width: 100%;
		height:1rem;
		float: left;
		font-size:0.37rem;
		.payment-right{
			line-height:1rem;
			width: 60%;
			height: 1rem;
			float: right;
			font-size:0.35rem;
		}
		.payment-right-left{
			float: left;
			width: 50%;
		}
		.payment-right-tight{
			float: right;
			width: 50%;
			font-size:0.4rem;
			background:red;
			color:#fff;
			text-align:center;
		}
	}
}
</style>
